{extend name="layout:base" /}
{block name="page_style"}
  <link rel="stylesheet" href="{$site_root}/static/ace1.4/assets/css/bootstrap-datepicker3.css" />
{/block}
{block name="main_content"}
  <div class="page-content">
    <!--主题-->
    <?php if(!empty($current_page)): ?>
      <div class="page-header">
        <h1>
          您当前操作
          <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            {$current_page.title|default=''}
          </small>
        </h1>
      </div>
    <?php endif; ?>
    <div class="row">
      <?php if(!empty($notice)): ?>
        <div class="alert alert-block alert-success">
          <button type="button" class="close" data-dismiss="alert">
            <i class="ace-icon fa fa-times"></i>
          </button>
          <i class="ace-icon fa fa-check green"></i>
          {$notice}
        </div>
      <?php endif; ?>
      <div class="col-xs-12">
        <form class="form-horizontal adminform" id="model-form" method="post" action="">
          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 
              登录名：
            </label>
            <div class="col-sm-10">
              <input type="text" name="name" placeholder="请输入您的登录名" class="col-xs-10 col-sm-5" value="{$user.name|default=''}" readonly="readonly" />
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 
              用户组名：
            </label>
            <div class="col-sm-10">
              <input type="text" name="group_title" placeholder="用户组名" class="col-xs-10 col-sm-5" value="{$group_title}" readonly="readonly" />
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 
              用户邮箱：<span class="red">*</span>
            </label>
            <div class="col-sm-10">
              <input type="email" name="email" placeholder="请输入您的邮箱" class="col-xs-10 col-sm-5" value="{$user.email|default=''}" required/>
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 
              用户头像
            </label>
            <div class="col-sm-10">
              {:upload_image("avatar", 100, 100, $user['avatar'])}
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 
              手机号码：
            </label>
            <div class="col-sm-10">
              <input type="number" name="mobile" placeholder="请输入您的手机号码" class="col-xs-10 col-sm-5" value="{$user.mobile|default=''}"/>
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 性别：  </label>
            <div class="col-sm-10">
              <select name="gender">
                <?php $list = list_field_user_gender(); ?>
                {volist name="list" id="vo"}
                  <option value="{$key}" <?php if($user["gender"]==$key){echo('selected="selected"');} ?>>{$vo}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="space-4"></div>

          <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 出生年月：  </label>
            <div class="col-sm-10">
              <div class="input-group col-xs-10 col-sm-5">
                <input class="form-control date-picker" type="text" placeholder="请选择您的出生年月"  data-date-format="yyyy-mm-dd" name="birthday" value="{$user.birthday|default=''}"/>
                <span class="input-group-addon">
                  <i class="fa fa-calendar bigger-110"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="space-4"></div>

          <div class="clearfix form-actions">
            <div class="col-md-offset-3 col-md-9">
              <button class="btn btn-info" type="submit">
                <i class="ace-icon fa fa-check bigger-110"></i>
                保存
              </button>

              &nbsp; &nbsp; &nbsp;
              <button class="btn" type="reset">
                <i class="ace-icon fa fa-undo bigger-110"></i>
                重置
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  <script src="{$site_root}/static/ace1.4/assets/js/bootstrap-datepicker.min.js"></script>
  <script type="text/javascript">
    $("form#model-form").validate({
      rules:{
        "mobile":{
          min: 13000000000,
          max: 19900000000
        },"email":{
          required: true,
          email: true,
          maxlength: 50
        }
      },
      messages:{
        "mobile":{
          min: "您输入的手机号码不存在",
          max: "您输入的手机号码不存在"
        },"email":{
          required: "用户邮箱不能为空",
          email: "用户邮箱格式不正确",
          maxlength: "用户邮箱长度不能超过50个字符"
        }
      },
      errorClass: "help-inline input-error",
      errorElement: "span",
      highlight:function(element, errorClass, validClass) {
        $(element).parents('.form-group').addClass('has-error');
      },
      unhighlight: function(element, errorClass, validClass) {
        $(element).parents('.form-group').removeClass('has-error');
      },
      submitHandler: function(form){
        var $form = $(form);
        $.ajax({
          url: $form.attr("action"),
          type: $form.attr("method"),
          dataType: "JSON",
          data: $form.serialize(),
          success: function(data){
            if(data.code){
              location.href = data["url"];
            }else{
              alert(data["msg"]);
            }
          }, error: function () {
            alert("数据执行错误！");
          }
        });
      }
    });

    jQuery(function($){
      $('.date-picker').datepicker({
        autoclose: true,
        todayHighlight: true
      }).next().on(ace.click_event, function(){
        $(this).prev().focus();
      });
    });
  </script>
{/block}